<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- 在head中的脚本会在页面调用的时候执行 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.5.2/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.5.2/lib/index.js"></script>
<!-- 引入js-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--icon 图表库-->
<script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>


<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet">
<head>

  <meta charset="UTF-8">
  <title>runtime-compile-test</title>

</head>
<body>

<div id="app">
  <div style="text-align: center; padding-top: 30px;">
    <h2>
      Java运行时编译测试
    </h2>
  </div>
  <div>


    <el-row style="padding-top: 50px; width: 100%;" :gutter="20">
      <el-col :span="8" :offset="2">
        <div>
          <el-input
              class="textarea1"
              type="textarea"
              :autosize="{ minRows: 20, maxRows: 49}"
              placeholder="请输入main函数中的简单代码，如System.out.println('Hello world.')"
              v-model="sourceCode">
          </el-input>
        </div>
      </el-col>
      <el-col :span="2" :offset="1">
        <div style="align-content: center; margin-top: 70px;">
          <div>
            <el-button type="primary" @click="reset">重置<i class="el-icon-warning el-icon--right"></i></el-button>
          </div>
          <br> <br>
          <br> <br>
          <div>
            <el-button type="success" @click="submit" :loading="submitLoading">提交
              <i class="el-icon-upload el-icon--right"></i></el-button>
          </div>
        </div>
      </el-col>

      <el-col :span="8" :offset="1">
        <div>
          <el-input
              class="textarea1"
              type="textarea"
              :autosize="{ minRows: 20, maxRows: 49}"
              placeholder="点击提交后，程序运行结果将会在这里显示"
              v-model="result">
          </el-input>
        </div>
      </el-col>
    </el-row>
  </div>


</div>

<script type="text/javascript" th:src="@{/js/index.js}"></script>

</body>
<style type="text/css" scoped>


  body {
    margin: 0;
  }

  #app {

    background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 50%, rgba(255, 255, 255, 0.02) 61%, rgba(0, 0, 0, 0.02) 73%), linear-gradient(33deg, rgba(255, 255, 255, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    background-blend-mode: normal, color-burn;
    /*z-index: 5;*/
    width: 100%;
    height: 100vh;
    position: relative;
    -webkit-background-size: 100%;
    font-family: 'Helvetica', sans-serif;
  !important;
  }

  .textarea1 {
    width: 100%;
  }

</style>
</html>